<template>
	<!-- components/groupCard/index.wxml -->
	<view class="item-card-container" @tap="goDetail" :data-groupId="info.groupId" :data-activityId="info.activityId">
		<image class="bg-img" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-group.png">
		</image>
		<view class="info-box">
			<view class="left">
				<view class="head">
					<text class="text">{{ info.teamCount }}人团</text>
					<image v-if="info.status === 2" class="icon"
						src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/sx-success.png"></image>
					<image v-if="info.status === 3" class="icon"
						src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/sx-fail.png"></image>
				</view>
				<text class="content">{{ info.activityName }}</text>
				<text class="time">
					<text>活动有效期：{{ info.startTime }}</text>
					<text v-if="info.alwaysValidStatus == 1">~{{ info.endTime }}</text>
					<text v-if="info.alwaysValidStatus == 2">~长期有效</text>
				</text>
				<text class="time" v-if="info.limitTimeStatus === 2">活动时间段：{{ info.limitTime }}</text>
			</view>

			<view class="right" v-if="info.status === 0">
				<button class="btn" style="color: #fc724c" @tap.stop.prevent="onGroup"
					:data-activityId="info.activityId">立即开团</button>
			</view>

			<view class="right" v-if="info.status === 1">
				<text class="text2">差{{ info.surplusUserCount }}人</text>
				<!-- <van-count-down :time="info.countDown" /> -->
				<u-count-down :time="info.countDown" format="HH:mm:ss"></u-count-down>
				<!-- <text class="time" style="margin: 10rpx 0;">{{ info.endGroupTime }}</text> -->
				<button class="btn" style="color: #fc724c" @tap.stop.prevent="onTap" :data-groupId="info.groupId"
					:data-activityId="info.activityId">邀请拼团</button>
			</view>

			<view class="right" v-if="info.status === 2">
				<text class="text2" style="margin-bottom: 53rpx">拼团成功</text>
				<button class="btn">查看</button>
			</view>

			<view class="right" v-if="info.status === 3">
				<text class="text2">拼团失败</text>
				<text class="text2" style="margin: 10rpx 0">差{{ info.surplusUserCount }}人</text>
				<button class="btn">查看</button>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	// import zpMixins from '@/uni_modules/zp-mixins/index';
	// import vanCountDown from './@vant/weapp/count-down/index';
	// components/groupCard/index.ts
	const app = getApp();
	import { openGroup } from '../../../api/marketing/group';
	export default {
		components: {
			// vanCountDown
		},
		data() {
			return {};
		},
		/**
		 * 组件的属性列表
		 */
		options: {
			styleIsolation: 'shared'
		},
		props: {
			info: {
				type: Object,
				required: true
			}
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			// 立即开团
			async onGroup(e : any) {
				const { activityid: activityId } = e.currentTarget.dataset;
				const _params = {
					activityId,
					sellerId: app.globalData.sellerId,
					userId: uni.getStorageSync('memberId'),
					partakeChannel: 3
				};
				const { code, msg } : any = await openGroup(_params).catch((err) => { });
				if (code === 200) {
					// let pages = getCurrentPages();
					// let current = pages[pages.length - 1];
					// (current as any).show()
					this.$emit('show');


					uni.showToast({
						title: '开团成功',
						icon: 'none',
						duration: 3000
					});
					setTimeout(() => {
						this.goDetail()
					}, 0)
				}
			},
			// 邀请拼团
			onTap(e : any) {
				const { groupid: groupId, activityid: activityId } = e.currentTarget.dataset;
				const myEventDetail = {
					groupId,
					activityId
				}; // detail对象，提供给事件监听函数
				const myEventOption = {}; // 触发事件的选项
				this.$emit(
					'invite',
					{
						detail: myEventDetail
					},
					myEventOption
				);
			},
			// 详情
			goDetail(e : any) {
				console.log(this.info, 'goDetail')
				console.log(e, 'eeeeeeeeeeeeeeeeee')
				console.log(this.info, 'info..........')

				let { groupId, activityId } = this.info;
				// uni.navigateTo({
				//     url: `/marketing_page/pages/group/detail/index?groupId=${groupid}&activityId=${activityid}`
				// });


				// #ifndef APP-PLUS
				uni.navigateTo({
					url: `/marketing_page/pages/group/detail/index?groupId=${groupId}&activityId=${activityId}`
				});
				// #endif

				// #ifdef APP-PLUS
				uni.navigateTo({
					url: `/marketing_page/pages/group/detail/index?groupId=${this.info.groupId}&activityId=${this.info.activityId}`
				});
				// #endif

			}
		},
		created: function () { }
	};
</script>
<style lang="less" scoped>
	// @import '/commin/commin.less'; /* components/groupCard/index.wxss */
	@import "../../../commin/commin.less";

	.item-card-container {
		position: relative;
		width: 702rpx;
		height: 192rpx;
		margin: 20rpx auto;
		box-shadow: 4px 7px 20px 0px rgba(166, 171, 179, 0.24);

		.bg-img {
			width: 702rpx;
			height: 192rpx;
			z-index: 0;
			position: absolute;
		}

		.info-box {
			display: flex;
			position: relative;
			z-index: 2;

			.left {
				width: 462rpx;
				height: 152rpx;
				padding: 20rpx;

				.head {
					display: flex;
					justify-content: space-between;
					height: 40rpx;

					.text {
						width: 102rpx;
						height: 38rpx;
						margin-left: -20rpx;
						text-align: center;
						line-height: 38rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #ffffff;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}

					.icon {
						width: 74rpx;
						height: 61rpx;
					}
				}

				.content {
					width: 462rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #606266;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					margin: 10rpx 5rpx;
				}

				.time {
					width: 462rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #909399;
					line-height: 36rpx;
					/* .yiman(1);*/
					margin: 0 5rpx;
					white-space: nowrap;
					display: block;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}

			/deep/.right {
				width: 200rpx;
				height: 192rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.text2 {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}

				.time {
					font-size: 24rpx;
					font-family: DIN;
					font-weight: bold;
					color: #ffffff;
				}

				.btn {
					width: 152rpx;
					height: 48rpx;
					background: #ffffff;
					box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(219, 92, 57, 0.3);
					border-radius: 24rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #606266;
					padding: 0;
				}

				>.u-count-down {
					>.u-count-down__text {
						color: #fff !important;
					}
				}
			}
		}
	}

	.van-count-down {
		font-size: 24rpx !important;
		font-family: DIN !important;
		font-weight: bold !important;
		color: #ffffff !important;
	}
</style>